<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="电话号码" prop="bookerPhone">
                            <el-input v-model="condition.search.bookerPhone"
                                      placeholder="电话号码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="姓名" prop="bookerName">
                            <el-input v-model="condition.search.bookerName"
                                      placeholder="姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="condition.search.status"
                                       placeholder="状态">
                                <el-option label="已到店90"
                                           value="90"></el-option>
                                <el-option label="超时未处理"
                                           value="80"></el-option>
                                <el-option label="顾客已取消70"
                                           value="70"></el-option>
                                <el-option label="未到店"
                                           value="60"></el-option>
                                <el-option label="已到店50"
                                           value="50"></el-option>
                                <el-option label="待到店"
                                           value="40"></el-option>
                                <el-option label="已拒绝顾客"
                                           value="30"></el-option>
                                <el-option label="顾客已取消20"
                                           value="20"></el-option>
                                <el-option label="待确认"
                                           value="10"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="同步状态" prop="syncStatus">
                            <el-select v-model="condition.search.syncStatus" placeholder="同步状态">
                                <el-option label="已同步" :value="true"></el-option>
                                <el-option label="未同步" :value="false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="exportExcel">导出</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" v-on:click="syncAll">同步至客户档案</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="dpReserveMainTable"
            :data="tableData"
            size="small"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="shopName"
                width="100px"
                label="门店名称">
            </el-table-column>
            <el-table-column
                prop="shopId"
                width="100px"
                label="门店ID">
            </el-table-column>
            <el-table-column
                prop="platform"
                :formatter="formatPlatform"
                label="平台">
            </el-table-column>
            <el-table-column
                prop="bookerGender"
                label="性别">
            </el-table-column>
            <el-table-column
                prop="bookerPhone"
                label="电话号码">
            </el-table-column>
            <el-table-column
                prop="bookerName"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="peopleNum"
                label="预定人数">
            </el-table-column>
            <el-table-column
                prop="tableTypeName"
                label="桌型">
            </el-table-column>
            <el-table-column
                prop="bookingTime"
                label="预定时间">
            </el-table-column>
            <el-table-column
                prop="acceptTime"
                label="接单时间">
            </el-table-column>
            <el-table-column
                prop="reserveTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="status"
                :formatter="formatStatus"
                label="状态">
            </el-table-column>
            <el-table-column
                prop="syncStatus"
                :formatter="formatSyncStatus"
                label="同步状态">
            </el-table-column>
            <el-table-column
                prop="remark"
                label="备注">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="80px">
                <template v-slot="scope">
                    <div>
                        <el-button @click="syncSingle(scope.row)" type="text" size="small">同步</el-button>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-dialog :title=addOrUpdateDialogTitle width="30%" :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" size="small">
                <el-form-item label="平台">
                    <el-input v-model="addOrUpdateForm.platform"
                              placeholder="平台"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="addOrUpdateForm.bookerGender"
                              placeholder="性别"></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input v-model="addOrUpdateForm.bookerPhone"
                              placeholder="电话号码"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="addOrUpdateForm.bookerName"
                              placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="预定人数">
                    <el-input v-model="addOrUpdateForm.peopleNum"
                              placeholder="预定人数"></el-input>
                </el-form-item>
                <el-form-item label="桌型">
                    <el-input v-model="addOrUpdateForm.tableTypeName"
                              placeholder="桌型"></el-input>
                </el-form-item>
                <el-form-item label="是否有预定商品">
                    <el-select v-model="addOrUpdateForm.hasMdseGood"
                               placeholder="是否有预定商品">
                        <el-option label="是" value="true"></el-option>
                        <el-option label="否" value="false"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预定创建时间">
                    <el-date-picker
                        v-model="addOrUpdateForm.reserveTime"
                        type="datetime"
                        placeholder="预定创建时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="预定时间">
                    <el-date-picker
                        v-model="addOrUpdateForm.bookingTime"
                        type="datetime"
                        placeholder="预定时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="接单时间">
                    <el-date-picker
                        v-model="addOrUpdateForm.acceptTime"
                        type="datetime"
                        placeholder="接单时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="addOrUpdateForm.remark"
                              placeholder="备注"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="addOrUpdateForm.status"
                              placeholder="状态"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="修改状态">
                    <el-input v-model="addOrUpdateForm.modifyStatus"
                              placeholder="修改状态"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOrUpdateDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="addOrUpdateConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    addDpReserve,
    deleteDpReserve,
    getDpReserveByPage,
    syncDpReserveAll,
    syncDpReserveSingle,
    updateDpReserve
} from '@/api/api'

export default {
    name: "DpReserve",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {}
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        shopId: String,
        size: {
            type: String,
            default: 'small'
        },
    },
    methods: {
        syncAll() {
            this.$confirm('该操作会同步所有的预定记录到客户档案里面，耗时较长，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                syncDpReserveAll({shopId: this.shopId}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '同步请求已提交，请稍后去客户管理页面查看！'
                        });
                        this.getData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        syncSingle(row) {
            this.$confirm('请确认是否同步，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                syncDpReserveSingle({id: row.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '同步成功，请前往客户管理页面查看结果！'
                        });
                        this.getData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatSyncStatus: function (row, column, cellValue) {
            if (cellValue) {
                return "已同步";
            } else {
                return "未同步";
            }
        },
        formatPlatform: function (row, column, cellValue) {
            if (cellValue == '20') {
                return "20";
            } else if (cellValue == '大众点评') {
                return "大众点评";
            } else {
                return "未知";
            }
        },
        formatStatus: function (row, column, cellValue) {
            if (cellValue == '90') {
                return "已到店90";
            } else if (cellValue == '80') {
                return "超时未处理";
            } else if (cellValue == '70') {
                return "顾客已取消70";
            } else if (cellValue == '60') {
                return "未到店";
            } else if (cellValue == '50') {
                return "已到店50";
            } else if (cellValue == '40') {
                return "待到店";
            } else if (cellValue == '30') {
                return "已拒绝顾客";
            } else if (cellValue == '20') {
                return "顾客已取消20";
            } else if (cellValue == '10') {
                return "待确认";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#dpReserveMainTable', '点评预定数据.xlsx');
        },
        add: function () {
            addDpReserve(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        update: function () {
            updateDpReserve(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteDpReserve({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.condition.search.shopId = this.shopId;
            }
            getDpReserveByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
            });
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
